<script setup lang="ts">
import { useOperate } from '@/stores/operate'
import { getMenuTreeStrueture } from '@/service/api/sys/menu/menu'
import { addRole, editRole, delRole } from '@/service/api/sys/role/role'
import { ElMessageBox } from 'element-plus'
import { roleFormType, menuType } from './role'
const Router = useRouter()

const operateState = useOperate() // 操作数据管理仓库
const template = {
  name: '',
  description: '',
  codeList: []
} // 对象初始化模板
const roleType = operateState.$state.type // 当前是查询新增编辑删除的分类
const roleForm = ref<roleFormType>(
  Object.assign({}, template, operateState.$state.form)
) // 当前操作的数据对象
const tree = ref<any>(null) // 权限实例
const menuTree = ref([]) // 所有菜单

// 菜单结构展示字段
const props = {
  value: 'code',
  label: 'name',
  children: 'childrenList'
}

// 获取菜单列表
const getMenuTree = () => {
  getMenuTreeStrueture()
    .then((res) => {
      menuTree.value = res.data
    })
    .catch((err) => {
      console.log(err)
    })
}

// 权限改变
const roleChange = (
  menu: any,
  data: {
    checkedNodes: Array<menuType>
  }
) => {
  roleForm.value.codeList = data.checkedNodes
    .map((item) => {
      if (item.isLast === true) {
        return item.code
      }
    })
    .filter((value) => {
      return value !== undefined
    }) as Array<Number>
}

// 保存角色
const saveRole = () => {
  ElMessageBox.confirm(`确认${operateState.$state.typeObj[roleType]}?`, {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      let res = null
      if (roleType === 2) {
        // 新增
        res = await addRole(roleForm.value)
      } else if (roleType === 3) {
        // 编辑
        res = await editRole(roleForm.value)
      } else if (roleType === 4) {
        // 删除
        res = await delRole({ id: roleForm.value.id })
      }
      console.log(res)
      ElMessage({
        type: 'success',
        message: `${operateState.$state.typeObj[roleType]}成功, 骚后返回!`
      })
      setTimeout(() => {
        Router.back()
      })
    })
    .catch(() => {
      ElMessage({ type: 'info', message: '已取消' })
    })
  console.log(roleForm)
}

onMounted(() => getMenuTree())
</script>

<template>
  <div>
    <el-form
      ref="form"
      :model="operateState.$state.form"
      label-width="auto"
      label-position="top"
      class="flex"
      :disabled="roleType === 4"
    >
      <div class="flex">
        <div class="mr-3 flex w-[200px] flex-col">
          <el-form-item label="角色名称">
            <el-input
              type="text"
              v-model="roleForm.name"
              class="input_darkColor mb-[20px]"
            />
          </el-form-item>
          <el-form-item label="说明" class="!flex flex-1 flex-col">
            <el-input
              type="textarea"
              v-model="roleForm.description"
              class="input_darkColor !flex h-full flex-row"
            />
          </el-form-item>
        </div>
        <el-form-item label="请选择角色权限" class="roleOperation">
          <div class="rounded bg-[--app-background-color] p-4">
            <el-tree
              :data="menuTree"
              show-checkbox
              accordion
              node-key="code"
              :default-checked-keys="roleForm.codeList"
              :props="props"
              @check="roleChange"
              class="roleOperation h-[427px] w-[540px] overflow-auto"
              ref="tree"
            >
              <template #default="{ node, data }">
                <div>{{ data.name }}</div>
              </template>
            </el-tree>
          </div>
        </el-form-item>
      </div>
    </el-form>
    <div class="mt-7 flex justify-center">
      <el-button type="primary" class="button_default" @click="Router.back()"
        >关闭</el-button
      >
      <el-button type="primary" class="button_function" @click="saveRole"
        >确定</el-button
      >
    </div>
  </div>
</template>

<style scoped>
.el-form-item {
  margin-bottom: 0 !important;
}
</style>
